<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"  import="burubaka.BurubakaConstants"%>
<%@taglib prefix="util" uri="/burubakaUtil"%>
<c:choose>
<c:when test="${util:isBeforeBetting(raceInfo.progress)}">
<fmt:message key="message.infomatio.befor.bet"/>
</c:when>
<c:when test="${util:isOverDeadline(raceInfo.progress,raceInfo.deadline)}">
<fmt:message key="message.infomatio.closing.bet"/>
</c:when>
<c:when test="${util:isWithinBetting(raceInfo.progress,raceInfo.deadline)}">
<fmt:message key="message.infomatio.betting">
	<fmt:formatDate value="${raceInfo.deadline}" pattern="yyyy年MM月dd日（E）kk時mm分" var="fmtDeadline"/>
	<fmt:param value="${fmtDeadline}"/>
</fmt:message>
<div class="btnArea">
	<a href="javascript:void(0);" id="regBet" class="btn"><span><fmt:message key="btn.bet" /></span></a>
	<a href="javascript:void(0);" id="delBet" class="btn"><span><fmt:message key="btn.delete" /></span></a>
</div>
<div id="handicapping" class="handicapping">
<!--
	<div class="markSelect">
		◎<select name="horseNo1" id="horseNo1"></select>
	</div>
	<div class="markSelect">
		&#9711;<select name="horseNo2" id="horseNo2"></select>
	</div>
	<div class="markSelect">
		▲<select name="horseNo3" id="horseNo3"></select>
	</div>
	<div class="markSelect">
		△<select name="horseNo4" id="horseNo4"></select>
	</div>
	<div class="markSelect">
		×<select name="horseNo5" id="horseNo5"></select>
	</div>
-->
	<div style="float:left;min-whidth:100px;">
	<c:forEach var="raceCardHorse" items="${raceCardHorseList}" varStatus="status">
		<div class="columnHorse">
			<div class="waku${raceCardHorse.waku}">${raceCardHorse.horseNo}</div>
			<div class="markRadio">
				<input type="radio" id="dc${raceCardHorse.horseNum}" name="horsemark${raceCardHorse.horseNum}" value="<%=BurubakaConstants.MARK_DOUBLE_CIRCLE %>" />
					<label for="dc${raceCardHorse.horseNum}" class="dcircle">◎</label>
				<input type="radio" id="c${raceCardHorse.horseNum}" name="horsemark${raceCardHorse.horseNum}" value="<%=BurubakaConstants.MARK_CIRCLE %>" />
					<label for="c${raceCardHorse.horseNum}" class="circle">&#9711;</label>
				<input type="radio" id="bt${raceCardHorse.horseNum}" name="horsemark${raceCardHorse.horseNum}" value="<%=BurubakaConstants.MARK_BLACK_TRIANGULAR %>" />
					<label for="bt${raceCardHorse.horseNum}" class="btriangle">▲</label>
				<input type="radio" id="t${raceCardHorse.horseNum}" name="horsemark${raceCardHorse.horseNum}" value="<%=BurubakaConstants.MARK_TRIANGULAR %>" />
					<label for="t${raceCardHorse.horseNum}"  class="triangle">△</label>
				<input type="radio" id="x${raceCardHorse.horseNum}" name="horsemark${raceCardHorse.horseNum}" value="<%=BurubakaConstants.MARK_X %>" />
					<label for="x${raceCardHorse.horseNum}"  class="cross">×</label>
				<input type="radio" id="s${raceCardHorse.horseNum}" name="horsemark${raceCardHorse.horseNum}" value="<%=BurubakaConstants.MARK_STAR %>" />
					<label for="s${raceCardHorse.horseNum}"  class="star">☆</label>
			</div>
			<!--  <select name="horsemark${raceCardHorse.horseNum}" class="slctMark" size="1"></select>-->
			<div class="columnHorseName">${util:getVerticalString(raceCardHorse.horseName)}</div>
			<div class="jockey">${raceCardHorse.jockey}</div>
		</div>
	</c:forEach>
	</div>
	<div style="padding-top:60px">
		<textarea name="commentStr" id="commentStr" class="commentStr" rows="5" wrap="soft" cols="70"></textarea>
	</div>
	<hr>
	<fmt:message key="message.infomatio.bet.footer"/><br><br>
</div>
<div class="quinellaArea"></div>
<div class="exactaArea"></div>
<div class="trioArea"></div>
<div class="trifectaArea"></div>
<div style="clear: both;"></div>
</c:when>
</c:choose>
<script type="text/JavaScript">
var markHorseOption ='<c:forEach var="raceCardHorse" items="${raceCardHorseList}" varStatus="status"><option value="${raceCardHorse.horseNum}">${raceCardHorse.horseNo}：${raceCardHorse.horseName}</option></c:forEach>';
	
var markSheetStr = '<div class="markSheet" name="betClassName"></div>'
						+'<div class="markSheet mark" name="mark"></div>'
						+'<div class="num markSheet dispwager" name="wager"></div>';

var quinellaStr = '<div class="quinella">'
						+markSheetStr
						+'</div>';

var exactaStr = '<div class="exacta">'
							+markSheetStr
							+'</div>';

var trioStr = '<div class="trio">'
						+markSheetStr
						+'</div>';

var trifectaStr = '<div class="trifecta">'
							+markSheetStr
							+'</div>';


var betLineStr = {
	quinella:quinellaStr
	,exacta:exactaStr
	,trio:trioStr
	,trifecta:trifectaStr
}

$(function(){
	//投票クリックイベント
	$("#regBet").bind("click",regBet_click);
	//削除クリックイベント
	$("#delBet").bind("click",delBet_click);
	//変更イベント
	$(".markRadio :radio").bind("change",radio_change);
	$(".markRadio :radio").hide();
	init_bet();
	
	$("#horseNo1").append(markHorseOption);
	$("#horseNo2").append(markHorseOption);
	$("#horseNo3").append(markHorseOption);
	$("#horseNo4").append(markHorseOption);
	$("#horseNo5").append(markHorseOption);
	
})

//初期表示
function init_bet(e){
	query = {};
	query[REQKEY_COMMAND] = REQKEY_COMMAND_INIT;
	//$("#handicapping .slctMark").append(option_mark_blank);
	b_ajax("/mypage/bet",query,displayBet);
}

//登録ボタンクリック
function regBet_click(e){
	query = {};
	query["handicapping"] =$.toJSON(getInput("#handicapping"));
	query[REQKEY_COMMAND] = REQKEY_COMMAND_REGIST;
	b_ajax("/mypage/bet",query,displayBet,betLineStr);
}

//削除ボタンクリック
function delBet_click(e){
	query = {};
	query[REQKEY_COMMAND] = REQKEY_COMMAND_DELETE;
	b_ajax("/mypage/bet",query,displayBet);
}

var displayBet = function(json){
	clearMarksheetArea();
	setResponseData(json,betLineStr);
	$("input[@type='radio']:checked").each(
		function(){
			$("+label",this).addClass("selected");
		}
	);
	formatWager();
}

var clearMarksheetArea = function(){
	$(".quinellaArea").html("");
	$(".exactaArea").html("");
	$(".trioArea").html("");
	$(".trifectaArea").html("");
}

var formatWager = function(){
	$(".dispwager").each(function(){
		var n =  $(this).text() + "00";
		n = setComma(n) + "円";
		$(this).text(n);
	});
}

var radio_change = function(e){
	$(this).parent().children("label").removeClass("selected");
	$("+label",this).addClass("selected");
	var target = this;
	$(".markRadio > input[@type='radio']:checked").not(this).each(
		function(){
			if($(this).val() === $(target).val()){
				$(this).val([""]);
				$("+label",this).removeClass("selected");
			}
		}	
	);
	
}
</script>
